<template>
<div id="main">
  <div id="login">
    <transition :name="settings.visible ? 'slideleft' : 'slideright'">
      <EnvBase v-if="settings.visible" @on-click="handleSettings"></EnvBase>
      <!-- EnvBase -->
      <div v-else class="login">
        <div class="logo-info">
          <img class="logo" src="../assets/logo.png" alt="logo">
          <p class="name">企业级中后台模板 <br>
            <span class="sub">基于 Vue.js 的开源模板</span>
          </p>
        </div>
        <!-- .logo-info -->
        <ComForm ref="login" :elem="loginElem" :model="login" :rules="loginRule" :btn-loading="this.$store.state.app.loading" @on-submit="handleLogin('login')"></ComForm>
        <!-- ComForm -->
        <p class="version">Version: {{ version }}</p>
        <!-- .version -->
      </div>
    </transition>
    <a v-if="settings.button" class="settings" href="#" @click.prevent="handleSettings">
      <Icon :type="settings.visible ? 'laptop' : 'settings'" size="18" style="position: relative;top: 2px;"></Icon>
      <strong>{{ settings.visible ? 'Login' : 'Settings'}}</strong>
    </a>
  </div>
  <!-- #login -->
  <SysError></SysError>
  <!-- SysError -->
</div>
</template>
<script>
import config from '@/config'
import ax from '@/config/axios'
import {
  login
} from '@/services/app'
import EnvBase from './common/partials/EnvBase'
import SysError from './common/partials/Error'
export default {
  name: 'Login',
  components: {
    EnvBase,
    SysError
  },
  data: () => ({
    // 设置属性对象
    settings: {
      button: true,
      visible: false
    },
    // 表单元素数组(登录)
    loginElem: [{
      prop: 'user',
      placeholder: 'Username'
    }, {
      prop: 'pwd',
      placeholder: 'Password',
      type: 'password'
    }, {
      button: [{
        long: true,
        name: 'submit',
        type: 'primary',
        text: 'Sign in'
      }]
    }],
    // 表单数据对象(登录)
    login: {
      user: '',
      pwd: ''
    },
    version: '',
    // 表单验证规则(登录)
    loginRule: {
      user: [{
        required: true,
        message: 'Please fill in the username',
        trigger: 'blur'
      }],
      pwd: [{
        required: true,
        message: 'Please fill in the password',
        trigger: 'blur'
      }]
    }
  }),
  mounted() {
    const {
      version
    } = config
    const env = process.env.NODE_ENV
    switch (env) {
      case 'production':
        this.settings.button = false
        this.version = `${version} Production`
        break
      case 'release':
        this.version = `${version} Release`
        break
      default:
        this.login = {
          user: 'admin',
          pwd: 'wasd@007'
        }
        this.version = env === 'test' ? `${version} Test` : `${version} Develop`
    }
  },
  methods: {
    handleSettings() {
      this.settings.visible = !this.settings.visible
    },
    handleLogin(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          // 配置默认接口地址
          ax.defaults.baseURL = localStorage.getItem('newURL') || config.baseURL
          // 用户登录
          this.$store.commit('LOADING', true)
          const para = Object.assign({}, this.login)
          // 模拟异步请求
          setTimeout(() => {
            login(para).then(res => {
              // 获取用户信息
              sessionStorage.setItem('user', JSON.stringify(res.data))
              // 获取菜单列表
              this.$store.dispatch('handleMenu')
              this.$store.commit('LOADING', false)
            }).catch(() => {
              this.$store.commit('LOADING', false)
            })
          }, 800)
        }
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
#login {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 350px;
    margin: -175px 0 0 -180px;
    padding: 36px;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.08);
    /* 过渡动画 */
    & .slideleft-enter-active, & .slideright-enter-active {
      transition: all 0.5s;
      transform: translateX(0);
    }
    & .slideleft-enter, & .slideright-enter {
      opacity: 0;
    }
    & .slideleft-leave-active, & .slideright-leave-active {
      transition: all 0.5s;
      opacity: 0;
    }
    & .slideleft-leave, & .slideright-leave {
      transform: translateX(0);
    }
    & .slideleft-enter, & .slideright-leave-active {
      transform: translateX(300px);
    }
    & .slideleft-leave-active, & .slideright-enter {
      transform: translateX(-300px);
    }
    /* end */
    & .settings {
        position: absolute;
        bottom: 16px;
    }
    & .login {
      position: absolute;
      width: 288px;
    }
    & .logo-info {
        height: 64px;
        margin-bottom: 22px;
        text-align: center;
        & .logo {
            width: 64px;
            height: 64px;
            margin-right: 10px;
        }
        & .name {
            position: relative;
            bottom: 14px;
            display: inline-block;
            text-align: left;
            font-size: 18px;
            line-height: 20px;
        }
        & .sub {
            font-size: 12px;
        }
    }
    & .version {
        text-align: center;
        color: #888;
    }
}
</style>
